<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
html,body,#map-canvas {
	height: 100%;
	/* 	width: 800px; */
	margin: 0px;
	padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
	function load_heatmap(map, lat, lng) {
		var heatMapData = [];
		for (var i = 0; i < 100/* 1000/zoom */; i++) {
			heatMapData.push({
				location : new google.maps.LatLng(lat + (Math.random() / 50)
						- .005, lng + Math.random() / 50 - .005),
				weight : /* Math.random() * 1 */2
			})
		}
		heatMapData.push({
			location : new google.maps.LatLng(
					lat + (Math.random() / 50) - .005, lng + Math.random() / 50
							- .005),
			weight : /* Math.random() * 1 */20
		})
		heatMapData.push({
			location : new google.maps.LatLng(
					lat + (Math.random() / 50) - .005, lng + Math.random() / 50
							- .005),
			weight : /* Math.random() * 1 */20
		})

		heatmap = new google.maps.visualization.HeatmapLayer(
				{
					data : heatMapData,
					gradient : [
							"rgba(0, 255, 255, 0)"/* first one should be transparent*/,
							"rgba(156, 255, 156, 0.6)",
							"rgba(49, 255, 0, 0.6)", "rgba(49, 207, 0, 0.6)",
							"rgba(255, 255, 0, 0.6)", "rgba(255, 207, 0, 0.6)",
							"rgba(255, 154, 0, 0.6)",
							"rgba(255, 100, 100, 0.6)", "rgba(255, 0, 0, 0.6)",
							"rgba(153, 0, 0, 0.6)", "rgba(206, 48, 255, 0.6)" ],
					//radius : 20,
					opacity : 1

				});
		heatmap.setMap(map);

	}
	function initialize(p) {
		// Adding 500 Data Points
		var map, pointarray, heatmap;
		var lat = p.coords.latitude;//12.867192099999999;
		var lng = p.coords.longitude;
		77.62098619999999
		var zoom = 13;

		var mapOptions = {
			zoom : zoom + 3,
			center : new google.maps.LatLng(lat, lng)
		};

		map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);

		load_heatmap(map, lat, lng);
	}

	google.maps.event.addDomListener(window, 'load', function() {
		if ("geolocation" in navigator) {
			var geo_options = {
				enableHighAccuracy : true,
				maximumAge : 30000,
				timeout : 27000
			};
			navigator.geolocation.getCurrentPosition(initialize, null,
					geo_options);
		} else {
			/* geolocation IS NOT available */
		}
	});
</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>
</html>